<template>
    <el-dialog
            :title="title?title:'请选择处理人'"
            v-bind="$attrs"
            v-on="$listeners"
            width="650px"
            append-to-body
            :close-on-click-modal="false"
            :before-close="handleClose">
        <template  v-if="msg">
        <span  class="approver-name" v-html="msg"></span>
        <div class="approver-name" style="margin-top: 10px">
        <div v-for="(_name,index) in names" :key="index" class="target">{{_name}}</div>
        </div>
        </template>
        <span class="approver-name" v-else>下一个处理人：{{name}}</span>
        <div class="dialog-content">
            <el-input
                    placeholder="搜索"
                    v-model="filterText" size="small" style="margin:10px 20px 0px; width: 90%">
            </el-input>
            <el-tree :data="list" ref="tree" :props="defaultProps" @node-click="handleNodeClick"  @check-change="handleNodeClick"
                     :showCheckbox="showCheckbox" :check-on-click-node="true" :node-key="key" :filter-node-method="filterNode" :render-after-expand="false"  :check-strictly="false"></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button @click="submit" type="primary" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
</template>
<script>
  //  import schoolSignature from "@/api/officialDocument/schoolSignature/index"
    import eventBus from "@/utils/eventBus";
    import {handleTree,concatChildren} from "@/utils/common";
    export default {
        name: "ApproverList",
        props: {
            nodeKey:{
                type:String,
                defalut:"username",
                required:false
            },
            dataList:{
                type:Array,
                default:function () {
                    return []
                }
            },
            showCheckbox:{
                type:Boolean,
                defalut:false
            },
            msg:{
                type:String,
                default:""
            },
            title:{
                type:String,
                default:""
            },

        },
        data() {
            return {
                name: "",
                node: {},
                list: [],
                defaultProps: {
                    children: 'users',
                    label: 'alias'
                },
                loading:false,
                filterText:undefined,
                names:[],
                deptObj:{},
                key:"username",
                deptIds:[]
            };
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        computed: {
        },
        created() {
            if (this.dataList && this.dataList.length > 0) {
              let list = handleTree(this.dataList, "id", "parent_dept");
              concatChildren(list)
              this.list = list
            }
            eventBus.$on("approverLoading", (loading) => {
                this.loading = loading
            });
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.alias.indexOf(value) !== -1;
            },
            handleClose(done) {
                this.$emit("update:visible", false)
            },
            handleNodeClick(data) {
                if (this.showCheckbox) {
                    if (this.$refs["tree"]) {
                        this.deptObj['n'+data.id]=data
                        this.arrangeDeptObj()
                        this.deptIds = []
                        let list = Object.values(this.deptObj)
                        list.map(item=>{
                            this.deptIds.push(item.id)
                        })
                        list = list.filter(item=>{
                            return item[this.key]
                        })
                        let names = list.map(item => {
                            return item.alias
                        })
                        console.log("this.names",this.names)
                        this.names = names
                        this.name=names.join(",")
                    }else{
                        this.name=""
                    }
                }else{
                    if (data.username) {
                        this.name = data.alias
                        this.node = data
                    }
                }
            },
            arrangeDeptObj(){
                let nodes = this.$refs["tree"].getCheckedNodes()
                for(let o in this.deptObj){
                    let flag = true
                    for(let i=0; i<nodes.length; i++){
                        if("n"+nodes[i].id==o){
                            flag=false
                            break
                        }
                    }
                    if(flag){
                        delete this.deptObj[o]
                    }
                }
            },
            submit() {
                if (this.name) {
                    let keys=[]
                    for(let o in this.deptObj){
                        if(this.deptObj[o][this.key]){
                            keys.push(this.deptObj[o][this.key])
                        }
                    }
                  this.handleClose()
                   this.$emit("callback", this.showCheckbox?{username:keys.join(","),showName:this.name,dept_ids:this.deptIds}:this.node)
                } else {
                    this.msgError("请选择处理人")
                }
            },
            beforeDestroy() {
                eventBus.$off("approverLoading")
            }
        }
    };
</script>
<style lang="scss" scoped>
    .approver-name {
        font-size: 20px;
        margin-bottom: 10px;
        .target{
            color: #1e82e0;
            border-radius: 3px;
            border: 1px #1e82e0 solid;
            font-size: 14px;
            padding: 5px;
            margin: 5px;
            display: inline-block;
        }
    }

    .dialog-content {
        height: 400px;
        overflow-y: scroll;
    }
    ::v-deep.el-tree{
        .el-tree-node:focus > .el-tree-node__content {
            background: #d8dadb;
        }
        .is-current>.el-tree-node__content{ background: #d8dadb;}
        .is-current>.el-tree-node__content::before{background: #d8dadb;}
    }

</style>
